<template>
    <view>
        <header>
            <text>{{feedbackInfo}}</text>
        </header>
        <main>
            <TextButton class="text-button" @click="scanCode">
                现在支付
            </TextButton>
            <TextButton class="text-button" @click="orderAgain">
                继续下单
            </TextButton>
        </main>
    </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
//导入文本按钮组件
import TextButton from '../components/common/TextButton.vue';
//使用全局状态-订单信息
import { useDetailStore } from '../stores/detail';
const orderInfo=useDetailStore();
//注册使用路由
const router=useRouter();
const route=useRoute();
//生成下单状态反馈信息
const feedbackInfo=computed<string>(()=>{
    if(eval(route.params.success as string)){
        return '下单完成，请耐心等待出餐。';
    }
    return '下单失败，菜品库存已更新。'
});
//定义现在支付按钮回调函数
function scanCode():void{
    //判断运行环境
    if(navigator.userAgent.includes('AlipayClient')){
        //拉起支付宝扫一扫
        window.AlipayJSBridge.call('scan',
            {type:'qr'},
            (result:object)=>{
                window.open(result?.codeContent);
            }
        );
    }else{
        //拉起微信扫一扫
    }
}
//定义继续下单按钮回调函数
function orderAgain():void{
    orderInfo.reset();
    router.push('/');
}
</script>

<style lang="scss" scoped>
$text-height:5vw;
$button-height:calc($text-height * 2);
/* 整体布局 */
view{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100vw;
    position:fixed;
    bottom:calc($text-height * 2);
}
/* 按钮容器布局 */
main{
    display:flex;
    flex-direction: column;
}
/* 头部文本样式 */
text{
    font: {
        size: $text-height;
        weight:bold;
    }
}
/* 按钮样式 */
:global(.text-button){
    color:white;
    background-color: green;
    width:80vw;
    border-radius:calc($text-height / 2);
    margin-top:calc($text-height / 2);
}
</style>
